<template>
  <div>
    <el-header class="min_width">
      <nav-bar></nav-bar>
      <div class="banner">
        <img src="../../../assets/img/b-banner.jpg" alt="" style="width: 100%"/>
      </div>
    </el-header>
    <!--    主体内容-->
    <div style="margin-top: 7%;margin-left: 15%;min-height: 700px">
      <!--      主体左-->
      <div style="width: 800px;display: inline-block;float: left;">
        <!--     标题 -->
        <div style="font-weight: bold;font-size: 20px;margin: 10px 0px">
          {{ item.videoTitle }}
        </div>
        <!--      标题下  -->
        <div style="margin: 10px 0px;color: #4d4d4d;font-size: 12px">
        <span>
          {{ item.videoIsreprint }}播放量 ·
        </span>
          <span>
          {{ barragenum }}弹幕总数 ·
        </span>
          <span>
          {{ item.videoCreatetime|formatDate }}
        </span>
        </div>
        <!--      播放器  -->
        <div
            style="padding: 10px 10px;background-color: black;height: 500px;width: 800px;display: inline-block;">
          <div style="height: 480px" id="dplayer">

          </div>
        </div>
        <!--        点赞·收藏·正在看·举报-->
        <div style="width: 800px;height: 80px;border-bottom: 1px solid darkgray">
          <div style="line-height: 100px;">
            <img style="width: 120px;height: 120px;position: absolute;left: 190px;top: 655px;z-index: 2"
                 :src="require('../../../assets/img/123.png')" v-if="isNiceshow"/>
<!--            点赞数-->
            <i slot="reference" class="el-icon-thumb nice" style="font-size: 26px;margin-right: 5px"
               :style="isNiceStyle" @click="Nice">
              <span style="font-size: 20px;margin-left: 5px;"> {{ niceNum }} </span>
            </i>
<!--            收藏数-->
            <i slot="reference" class="el-icon-star-off nice"
               style="font-size: 26px;margin-right: 5px;margin-left: 20px"
               :style="isCollectionStyle" @click="Collection">
              <span style="font-size: 20px;margin-left: 5px;"> {{ collectNum }} </span>
            </i>
<!--            正在看-->
            <span style="font-size: 20px;margin-left: 20px">
              <span style="font-weight: bold;color: #505050;"> {{ item.videoOnline }}</span>
              <span>人正在看</span>
            </span>
            <i slot="reference" class="el-icon-warning-outline nice"
               style="font-size: 26px;margin-right: 5px;margin-left: 50px;">
            </i>
          </div>
        </div>
<!--        评论区-->
        <div>
          <h2 style="margin: 10px 0px">评论</h2>
          <el-tabs v-model="activeName"  style="width: 300px">
            <el-tab-pane label="按热度排序" name="first"  ></el-tab-pane>
            <el-tab-pane label="按时间排序" name="second"></el-tab-pane>
          </el-tabs>
          <el-avatar id="lo" slot="reference" size="medium"
                     style="margin-right: 20px;float: left;width:45px;height: 45px">
            <img :src="user.userImgsrc">
          </el-avatar>
          <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 3, maxRows: 3}"
              placeholder="请输入评论内容，最大限制200字哦~"
              style="width: 500px"
              maxlength="200"
              class="resizeNone"
              v-model="textarea">
          </el-input>
          <el-button type="primary" style="height: 75px;width:75px;margin-left: 20px" >发表<br><span style="display: inline-block;margin-top: 5px">评论</span></el-button>
<!--          <el-input-->
<!--              type="textarea"-->
<!--              :rows="3"-->
<!--              placeholder="请输入内容"-->
<!--              v-model="textarea"-->
<!--              size="medium"-->

<!--          >-->
<!--          </el-input>-->
        </div>
      </div>
      <!--     主体右 -->
      <div style="width: 250px;display: inline-block;margin-left: 20px;">
        <div style="height: 80px;">
          <div>
            <el-avatar id="lo" slot="reference" size="medium"
                       style="margin-right: 20px;float: left;width:45px;height: 45px">
              <img :src="bigvMes.user_imgsrc" @click="jumpPath(bigvMes.user_id)">
            </el-avatar>
            <div style="display: inline-block;">
              <span class="bigvName" style="display: inline-block; font-size: 14px;" @click="jumpPath(bigvMes.user_id)">
                {{ bigvMes.user_nickname }}
              </span><br>
              <span style="display: inline-block;font-size: 12px; ">
                {{ bigvMes.user_suggest }}
              </span>
            </div>
          </div>
          <div style="display: inline-block;height: 70px">
            <i class="el-icon-plus fans" :style="isFansStyle"
               style="color:white;display: inline-block;padding: 10px 20px;border-radius: 2px"
               @click="Fans">
              {{ isFansV }}
            </i>
          </div>
        </div>
        <div>
          <div
              style="background-color: #E6E6E6;height: 50px;width: 250px;display: inline-block;padding:0px 20px 0px 20px;">
            <span style="line-height: 50px">弹幕列表</span>
            <span style="font-size: 12px;float: right;line-height: 50px"><span class="show"
                                                                               @click="show">{{ operate }}</span></span>
          </div>
          <br>
          <div style="display: inline-block;width: 250px">
            <transition name="el-zoom-in-top">
              <div v-show="show2" class="transition-box">
                <div style="font-size: 12px;color: #4d4d4d;padding-left: 20px;text-align: center;">
                  <span style="float: left">时间</span>
                  <span style="margin-left: 20px">弹幕内容</span>
                </div>
                <div
                    style="font-size: 12px;color: #4d4d4d;padding-left: 20px;text-align: center;max-height: 440px;overflow-y: scroll">
                  <div style="height: 20px;line-height: 20px" v-for="bl in barrageList">
                    <span style="float: left">{{ bl.barrage_video_time|mDate }}</span>
                    <span style="display: inline-block;margin-left: 20px;width: 100px;overflow-x: hidden">{{
                        bl.barrage_content
                      }}</span>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import DPlayer from 'dplayer'
import ax from 'axios'
import {offFans} from "../../../api/videos/videos";

const {offCollectVideo, onCollectVideo, onFans} = require("../../../api/videos/videos");
export default {
  name: "Vedios",
  data() {
    return {
      textarea: '',
      activeName:'first',
      niceNum: '',
      collectNum: '',
      bigvMes: {},
      isFansV: '关注',
      isFans: false,
      isFansStyle: "background-color: #00a1d6;",
      isNiceshow: false, //点赞上面gif图是否显示
      isNice: false,  //是否点赞
      NiceStyle: "../../../assets/img/123.png",//点赞后的特性地址
      isNiceStyle: "",//"点赞后的样式"
      isCollect: false,
      isCollectionStyle: "",// 收藏后的样式
      barrageList: '',//全部弹幕
      barragenum: '',//弹幕数量
      show2: false,
      operate: "展开",
      item: {
        videoCover: '',//封面
        videoCreatetime: '',//视频发布时间
        videoId: '',//视频id
        videoIsreprint: '',//视频点击量
        videoLength: '',//视频长度
        videoOnline: '',//视频在线人数
        videoReprintsite: '',//视频转载地址
        videoSharpnesses: [//视频三种清晰度数据
          {
            definition: '',//视频清晰度类型
            id: '',//清晰度id
            videoId: '',//视频id
            videoUrl: '',//视频地址
          }
        ],
        videoState: '',//视频状态
        videoSuggest: '',//视频简介
        videoTags: '',//视频标签
        videoTitle: '',//视频标题
        videoUrl: '',//视频地址
        videoUserId: '',//视频作者id
        videoVideotype: '',//视频类型：原创 转载
        videoZoneId: '',//视频小分区id
      },
      user: {}
    }
  }, mounted() {
    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
    window.addEventListener("unload", (e) => this.unloadHandler(e));
    this.$http.get('hemo/system/video/animatedRandomVideoById?videoId=' + this.$route.query.id).then(r => {
      this.item = r.data.data
      console.log(this.item)
    })
    this.$http.get('hemo/system/video/findVideoNiceCollectFans', {
      videoId: this.$route.query.id,
      userId: this.user.userId,
      bigvId: this.item.videoUserId
    }).then(r => {
      this.niceNum = r.data.niceNum.niceNum
      this.collectNum = r.data.collectNum.collectNum
      //是否粉丝
      if (r.data.fans.length > 0) {
        this.isFans = true;
      } else {

      }
      //是否收藏
      if (r.data.collect.length > 0) {
        this.isCollect = true;
        this.isCollectionStyle = "color: #3AD2F9;"
      } else {
        this.isCollectionStyle = ""
      }
      //是否点赞
      if (r.data.nice.length > 0) {
        this.isNice = true;
        this.isNiceStyle = "color: #3AD2F9;"
      } else {
        this.isNiceStyle = ""
      }
    }).catch(err => {
      alert(err)
    }).finally(() => {
      let self = this;
      const dp = new DPlayer({
        container: document.getElementById("dplayer"),//绑定组件
        video: {
          quality: [
            {
              name: '360P',
              url: self.item.videoSharpnesses[0].videoUrl,//视频路径
              type: 'auto',
            },
            {
              name: '720P',
              url: self.item.videoSharpnesses[1].videoUrl,//视频路径
              type: 'auto',
            },
            {
              name: '1080P',
              url: self.item.videoSharpnesses[2].videoUrl,//视频路径
              type: 'auto',
            },
          ],
          // url: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',//视频路径
          defaultQuality: 0,
          pic: self.item.videoCover,//封面
          // type: 'auto',
        },
        mutex: true,//互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        hotkey: true,//开启热键，支持快进、快退、音量控制、播放暂停
        preload: 'auto',//视频预加载，可选值: 'none', 'metadata', 'auto'
        autoplay: false,//视频自动播放
        theme: 'deepskyblue',//主题色
        loop: false,//视频循环播放
        lang: 'zh-cn',//语言可选值: 'en', 'zh-cn', 'zh-tw'
        screenshot: false,//开启截图，如果开启，视频和视频封面需要允许跨域
        contextment: [//自定义右键菜单
          {
            playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2]
          }
        ],
        danmaku: {
          id: self.item.videoId,
          user: self.user.userId,
          //user:self.user.userId,
          api: 'http://localhost:9000/hemo/system/barrage/',
          // api: 'http://localhost:8090/test/',
        }
      })
      dp.on('quality_start', (d) => {
        console.log('切换清晰度')
      })
      dp.on('danmaku_send', (d) => {
        self.load()
      })
      dp.on('quality_end', (d) => {
        console.log('切换清晰度')
      })
    })

  },
  created() {
    this.load()
    this.OnlineUpd()
    //this.$http.post("hemo/system/history/addhistory")
    // setTimeout(r={
    //   this.$http.post("hemo/system/history/addhistory")
    // },1000)
  },
  methods: {
    //评论排序
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //关注事件
    Fans() {
      //判断用户是否登录
      if (sessionStorage.getItem('user') != null) {
        if(this.user.userId==this.item.videoUserId){
          this.$message.error("您不能关注自己")
        }else {
          if (this.isFans) {
            this.isFansV = '关注'
            this.isFans = false;
            this.isFansStyle = 'background-color: #00a1d6;'
            offFans(this.user.userId, this.item.videoUserId).then(r => {
              this.load()
            })
          } else {
            this.isFansV = '已关注'
            this.isFans = true;
            this.isFansStyle = 'background-color: #c8c8c8;'
            onFans(this.user.userId, this.item.videoUserId).then(r => {
              this.load()
            })
          }
        }
      } else {
        this.$message.error("您还未登录，请先登录")
      }
    },
    //收藏事件
    Collection() {
      //判断用户是否登录
      if (sessionStorage.getItem('user') != null) {
        //是否收藏
        if (this.isCollect) {
          //取消收藏
          this.isCollect = false
          this.isCollectionStyle = ''
          offCollectVideo(this.user.userId, this.item.videoId).then(r => {
            this.load()
          })
        } else {
          this.isCollect = true
          this.isCollectionStyle = "color: #3AD2F9;"
          onCollectVideo(this.user.userId, this.item.videoId).then(r => {
            this.load()
          })
        }
      } else {
        this.$message.error("您还未登录，请先登录")
      }
    },
    //点赞事件
    Nice() {
      //判断用户是否登录
      if (sessionStorage.getItem('user') != null) {
        //是否点赞
        if (this.isNice) {
          //取消点赞
          this.isNice = false;
          this.isNiceStyle = ''
          this.$http.post("hemo/system/video/offNiceVideo", {
            userId: this.user.userId,
            videoId: this.item.videoId
          }).then(r => {
            this.load()
          })
        } else {
          //点赞
          this.isNice = true;
          this.isNiceshow = true
          this.isNiceStyle = "color: #3AD2F9;"
          this.$http.post("hemo/system/video/onNiceVideo", {
            userId: this.user.userId,
            videoId: this.item.videoId
          }).then(r => {
            this.load()
          })
          let vm = this
          let i = 0;
          let a = 0;
          //以100毫秒每次的速度举起手
          let intervalid = setInterval(() => {
            if (i == 0) {
            } else if (i == 1) {
            } else if (i == 2) {
            } else if (i == 3) {
              let intervalid2 = setInterval(() => {
                //以200毫秒每次的速度闪四次
                if (a == 0) {
                } else if (a == 1) {
                } else if (a == 2) {
                } else if (a == 3) {
                  this.isNiceshow = false
                  clearInterval(intervalid2)
                }
                a++;
              }, 100)
            }
            i++;
          }, 100)
        }

      } else {
        this.$message.error("您还未登录，请先登录")
      }

    },
    show() {
      if (this.show2) {
        this.operate = '展开'
      } else {
        this.operate = '收起'
      }
      this.show2 = !this.show2
    },
    // 页面关闭
    async unloadHandler(e) {
      // 退出登录
      await this.anniu();
    },
    // 页面关闭之前，触发提示框
    beforeunloadHandler(e) {
      if (this.user) {
        ax.post("http://localhost:9000/hemo/system/video/delVideoOnline?videoid=" + this.$route.query.id)
      }
      // if (e) {
      //   e = e || window.event;
      //   console.log(e);
      //   if (e) {
      //     e.returnValue = "关闭提示";
      //   }
      //   return "关闭提示";
      // }
    },
    OnlineUpd() {
      this.$http.get('hemo/system/video/animatedRandomVideoByIdUpd?videoId=' + this.$route.query.id + "&userId=" + this.user.userId).then(r => {
      })
    },
    load() {
      var self = this;
      let user = sessionStorage.getItem("user")
      if (user != null) {
        this.isActive = true
        this.user = JSON.parse(user)
      } else {
        this.user = {
          userId: ''
        }
      }
      //查询弹幕数量
      this.$http.get('hemo/system/video/getVideoBarrageCount?videoid=' + this.$route.query.id).then(r => {
        this.barragenum = r.data.num
      })
      //查询弹幕列表
      this.$http.get('hemo/system/video/getVideoBarrageList?videoid=' + this.$route.query.id).then(r => {
        this.barrageList = r.data
      })
      //查询视频详情
      this.$http.get('hemo/system/video/animatedRandomVideoById?videoId=' + this.$route.query.id).then(r => {
        this.item = r.data.data
        //粉丝收藏关注
        self.$http.get('hemo/system/video/findVideoNiceCollectFans?videoId=' + this.$route.query.id + "&userId=" + this.user.userId + "&bigvId=" + this.item.videoUserId).then(r => {
          console.log(r.data)
          self.bigvMes = r.data.bigvMes
          self.niceNum = r.data.niceNum.niceNum
          self.collectNum = r.data.collectNum.collectNum
          //是否粉丝
          if (r.data.fans.length > 0) {
            self.isFansV = '已关注'
            self.isFans = true;
            self.isFansStyle = 'background-color: #c8c8c8;'
          } else {
            self.isFansV = '关注'
            self.isFans = false;
            self.isFansStyle = 'background-color: #00a1d6;'
          }
          //是否收藏
          if (r.data.collect.length > 0) {
            self.isCollect = true;
            self.isCollectionStyle = "color: #3AD2F9;"
          } else {
            self.isCollectionStyle = ""
          }
          //是否点赞
          if (r.data.nice.length > 0) {
            self.isNice = true;
            self.isNiceStyle = "color: #3AD2F9;"
          } else {
            self.isNiceStyle = ""
          }
        })
      })

    },
    // 点击跳转路径
    jumpPath(keyword) {
      // this.$router.push(`/search?keyword=${keyword}`);
      let newUrl = this.$router.resolve({
        path: `/others?id=${keyword}`
      });
      window.open(newUrl.href, "_blank");
    }
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    },
    mDate: function (time) {
      const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
      const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)

      return min + ':' + sec;
    }
  }
}
</script>

<style scoped>
.resizeNone {
  resize: none;
}
.fans:hover {
  cursor: pointer;
}

.bigvName:hover {
  cursor: pointer;
  color: #00b5e5;
}

.nice:hover {
  cursor: pointer
}

.show:hover {
  cursor: pointer;
}

.banner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 9.5vw;
  overflow: hidden;
}

.banner img {
  /* width: 100%; */
  height: 100%;
}
</style>
